<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <!-- 在线轮播引入 -->
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
</head>

<body class="dpflex fdcolumn">
    <!-- 头部主体 -->
    <div class="container flex1">

        <!-- 轮播区域 -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="./img/index-swiper-bg1.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="./img/index-swiper-bg2.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="./img/index-swiper-bg3.jpg" alt="">
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>

        <!-- 主体部分 -->
        <main class="content mt16">

            <!-- 排名和打卡 -->
            <div class="rank-punch dpflex">
                <div class="rank mr16 pd8">
                    <h3>今日排名</h3>
                    <img src="./img/index-card-rank.png" class="mt20" alt="">
                    <span id="rankNum">9</span>
                </div>
                <div class="punch pd8">
                    <h3>累计打卡<span id="punchDay">23</span>天</h3>
                    <img src="./img/index-card-sum.png" class="mt10" alt="">
                    <div id="todayPunch" class="today-punch"></div>
                </div>
            </div>

            <!--运动数据  -->
            <div class="sport  dpflex mt16">
                <div class="sport-data flex1 mr16"><h3>运动数据</h3></div>
                <div class="sport-badge flex1">
                    <h3>累积运动徽章</h3>
                    <img src="./img/index-card-badge.png" alt="">
                    <span><i id="badgeNum">3</i>枚</span>
                </div>
            </div>

            <!-- 课程训练 -->
            <div class="train  mt16"></div>

            <!-- 跑步 -->
            <div class="run  mt16"></div>
        </main>
    </div>

    <!-- 底部 -->
    <footer id=footer class="footer"></footer>

    <!-- 轮播插件 -->
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"> </script>
    <!-- ajax接口 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

</body>

</html>